import React, { Component, lazy } from 'react'
import { TabBar } from 'antd-mobile'
import { Route } from 'react-router-dom'
import './index.css'
import Index from '../Index'
const HouseList = lazy(() => import('../HouseList'))
const Profile = lazy(() => import('../Profile'))

// tabbar 数据
const tabItems = [
  {
    title: '首页',
    id: 1,
    icon: 'icon-ind',
    path: '/home'
  },
  {
    title: '找房',
    id: 2,
    icon: 'icon-findHouse',
    path: '/home/list'
  },
  {
    title: '我的',
    id: 4,
    icon: 'icon-my',
    path: '/home/profile'
  }
]

export default class Home extends Component {
  state = {
    selectedTab: this.props.location.pathname
  }

  componentDidUpdate(prevProps) {
    if (prevProps.location.pathname !== this.props.location.pathname) {
      this.setState({
        selectedTab: this.props.location.pathname,
      })
    }
  }
  // 渲染tabbar item
  renderTabbarItem = () => {
    return tabItems.map((item) =>
      <TabBar.Item
        title={item.title}
        key={item.id}
        icon={
          <i className={`iconfont ${item.icon}`} />
        }
        selectedIcon={
          <i className={`iconfont ${item.icon}`} />
        }
        selected={this.state.selectedTab === item.path}
        onPress={() => {
          this.setState({
            selectedTab: item.path,
          });
          this.props.history.push(item.path)
        }}
      >
      </TabBar.Item>
    )
  }
  render() {
    return (
      <div className="home">
          <Route exact path='/home' component={Index} />
          <Route path='/home/list' component={HouseList} />
          <Route path='/home/profile' component={Profile} />
        <TabBar tintColor="#02cf7a" barTintColor="white" noRenderContent={true}>
          {this.renderTabbarItem()}
        </TabBar>
      </div>
    )
  }
}
